<template>
  <div id="service">
    <service-nav-bar />
    <scroll class="scroll">
      <service-consulting />
      <service-problem :subject="subject" @handleSkipQuestionDetail="handleSkipQuestionDetail" />
    </scroll>
    <router-view :subject="subject" :content="content" :current-index="currentIndex"/>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import ServiceNavBar from "./childComps/ServiceNavBar";
import ServiceConsulting from "./childComps/ServiceConsulting";
import ServiceProblem from "./childComps/ServiceProblem";

import { getExplain } from "network/service";
export default {
  data() {
    return {
      problem: {},
      subject: [],
      content: [],
      currentIndex: 0
    };
  },
  created() {
    this.getExplain();
  },
  methods: {
    getExplain() {
      getExplain().then((res) => {
        this.problem = res;
        for (const value of Object.keys(this.problem)) {
          value.includes("Caption")
            ? this.subject.push(this.problem[value])
            : this.content.push(this.problem[value]);
        }
      });
    },
    handleSkipQuestionDetail(index) {
      this.currentIndex = index
    }
  },
  components: {
    Scroll,
    ServiceNavBar,
    ServiceConsulting,
    ServiceProblem,
  },
};
</script>
<style lang="less" scoped>
#service {
  position: relative;
  height: 100vh;
  background-color: #fff;
  z-index: 1;
  .scroll {
    height: calc(100% - 44px);
    overflow: hidden;
  }
}
</style>